<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/ant-table">antTable</router-link> |
      <router-link to="/ol-map">olMap</router-link> |
      <router-link to="/three">three</router-link> |
      <router-link to="/svg">svg</router-link> |
      <router-link to="/aq">安全</router-link> |
    </nav>
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  nav {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .main-content {
    flex: 1;
    height: 0;
    padding: 10px;
  }
}
</style>
